<template>
	<view class="Index">
		<view class="defaultMap" v-if="carList.length===0">
			<image src="/static/img/images/tu.png" mode=""></image>
			<view class="texna">
				暂无更多信息，看看其他的吧
			</view>
		</view>
		<!-- 瀑布流布局列表 -->
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="goPage(item)">
					<u-lazy-load :image="item.picture_Path+'!idx'"></u-lazy-load>
					<view class="listtitle">
						<view class="listtitle1">{{ item.name }}</view>
						<view class="listtitle2">
							<text class="listtitle2son">￥</text>
							{{ item.price }}
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="goPage(item)">
					<u-lazy-load :image="item.picture_Path+'!idx'"></u-lazy-load>
					<view class="listtitle">
						<view class="listtitle1">{{ item.name }}</view>
						<view class="listtitle2">￥{{ item.price }}</view>
					</view>
				</view>
			</template>
		</u-waterfall>

	</view>
</template>

<script>
	export default {
		props: {
			carList: {
				type: Array,
				default: () => [],
			}
		},
		data() {
			return {
				flowList: [],
			};
		},
		watch: {
			// 监听车品列表
			carList(val) {
				// console.log('监听数组', val)
				/* 
				 * if: 如果车品列表为空，则把瀑布流组件的数据清空
				 * 
				 * else: 如果车品列表有数据，则先把瀑布流组件的数组数据清空
				 * 然后调用处理数组的方法，该方法处理瀑布流组件用到的数组
				 * 
				 */
				if (val.length === 0) {
					this.flowList = []
					this.$refs.uWaterfall.clear()
				} else {
					this.flowList = val
					this.addRandomData()
				}
			}
		},

		methods: {
			goPage(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages_carGoods/carGoodsDetail/carGoodsDetail?id=${item.id}`
				})
			},
			addRandomData() {
				this.flowList = JSON.parse(JSON.stringify(this.carList))
			},
		}
	};
</script>

<style lang="scss" scoped>
	//默认图
	.defaultMap {
		padding-top: 100rpx;
		width: 100%;
		// height: 85vh;
		text-align: center;

		image {
			width: 340rpx;
			height: 340rpx;
		}

		.texna {
			font-size: 28rpx;
			color: #999999;
		}
	}

	//瀑布流
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12);
		padding: 8px;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.item-masonry image {
		width: 100%;
	}

	.listtitle {
		padding-left: 22rpx;
		font-size: 24rpx;
		padding-bottom: 22rpx;

		.listtitle1 {
			line-height: 39rpx;
			color: #333333;
			font-size: 30rpx;
			margin-top: 20rpx;
			font-weight: 500;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			min-height: 39rpx;
			max-height: 78rpx;
		}

		.listtitle2 {
			font-size: 34rpx;
			color: #EB5C02;
			font-weight: bold;

			.listtitle2son {
				font-size: 30rpx;
			}
		}
	}
</style>
